import React, { Component } from 'react';
import CustomForm from '../../../components/CustomForm';
import { Input, Button, message, Select, Row, Col, Table, Tabs, Tooltip, Alert } from 'antd';
import services from '../../../services/api';
import Fields from './fields';
import { AUDIT } from '../../../utils/constant';
import { IconFont } from '../../../components/IconFont';

const Option = Select.Option;
const { TabPane } = Tabs;
const { Search } = Input;

class OuterListAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      interfaceGroupOptions: [],
      interfaceOptions: [],
      mapping_relation: {},
      detail: null,
      activeRow: null,
      fileList: [],
      // nameList: [],
      input_field_lists: [],
      mapInShows: [],
      input_field_shows: [],
      third_list_config_id: '',
      keywordAdd: '',
      keywordMap: '',
      outerSelectResource: [],
      columnsMap: [
        {
          title: '字段code',
          dataIndex: 'param_code',
          key: 'param_code',
          render: (text) => (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          ),
        },
        {
          title: '字段名',
          dataIndex: 'param_name',
          key: 'param_name',
          render: (text) => (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          ),
        },
        {
          title: '类型',
          dataIndex: 'data_type',
          key: 'data_type',
          render: (text) => (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>{text}</div>
            </Tooltip>
          ),
        },
        {
          title: '映射字段',
          dataIndex: 'mapping',
          key: 'mapping',
          width: '150px',
          ellipsis: true,
          render: (_, { param_id }) => {
            const { mapping_relation } = this.state;
            const mapping = mapping_relation && mapping_relation[param_id] && mapping_relation[param_id].field_code;
            return (
              <Tooltip title={mapping}>
                <div className='overflowtext' style={{ width: '100%' }}>
                  {mapping}
                </div>
              </Tooltip>
            );
          },
        },
      ],
      output_field_lists: [],
      output_field_shows: [],
      step: 1,
      showTest: false,
      app_id: '',
      product_id: '',
      event_id: '',
      requestData: {},
      requestJSON: '',
      responseJSON: '',
      url: '',
      // asyncLoading: false,
      inputPageParams: {
        page: 1,
        size: 10,
      },
      outputPageParams: {
        page: 1,
        size: 10,
      },
    };
    this.actionType = 'add';
    this.form = null;
    this.api = 'outerList';
  }

  componentDidMount() {
    this.asyncData();
    this.getInterfaceGroup();
    this.actionType = this.props.actionType;
    if (this.props.actionType) {
      if (this.actionType === 'update' || this.actionType === 'detail') {
        this.third_list_id = this.props.id;
        this.getNameList(this.props.record.group_id);
      }
      if (
        this.actionType === 'map' ||
        this.actionType === 'update' ||
        this.actionType === 'detail' ||
        this.actionType === 'child-update'
      ) {
        this.handleInterfaceChange(this.props.record.third_list_config_id);
      }
      if (this.actionType === 'map' || this.actionType === 'child-update') {
        this.setState({
          step: 2,
        });
      }
    }
  }

  // 进入页面 默认同步数据
  asyncData = async () => {
    const { code, msg } = await services.outerList.syncBankDataSource();
    if (code) message.error(msg);
  };

  // 获取接口分组的列表
  getInterfaceGroup = async () => {
    const { data: interfaceGroupOptions, code } = await services.outerList.interfaceGroupList();
    if (!code) this.setState({ interfaceGroupOptions });
  };

  // 根据接口分组获取接口
  handleGroupChange = (value) => {
    this.form.setFieldsValue({
      third_list_config_id: '',
    });
    value && this.getNameList(value);
  };
  getNameList = (group_id) => {
    services[this.api].getNameList({ group_id }).then((res) => {
      if (res.code === 0) {
        this.setState({
          interfaceOptions: res.data,
        });

        // if (this.actionType === 'add') {
        //   this.form.setFieldsValue({
        //     third_list_config_id: '',
        //   });
        // } else if (this.actionType === 'update' && res.data) {
        //   for (let i = 0; i < res.data.length; i++) {
        //     if (res.data[i].third_list_config_id === this.props.record.third_list_config_id) {
        //       this.form.setFieldsValue({
        //         remark: res.data[i].remark,
        //       });
        //     }
        //   }
        // }
      } else {
        message.error(res.msg);
      }
    });
  };

  // 选择接口获取参数
  handleInterfaceChange = (third_list_config_id) => {
    this.setState({
      third_list_config_id,
    });
    this.getNameListDetail({ third_list_config_id });
  };

  getNameListDetail = (params) => {
    services[this.api].getNameListDetail(params).then((res) => {
      const { code, data, msg } = res;
      if (code === 0) {
        this.form.setFieldsValue({
          remark: data.remark,
        });
        this.setState({
          input_field_lists: data.input_field_list,
          output_field_lists: data.output_field_list,
        });
        this.updateInColumns();
        this.updateOutColumns();
        this.updateMapInColumns();
        this.setState({
          keywordAdd: '',
          keywordMap: '',
        });
        this.activeFirstRow();
      } else {
        message.error(msg);
      }
    });
  };

  // goTestPage = () => {
  //   this.form.validateFields((err, values) => {
  //     if (values.url) {
  //       this.setState({
  //         showTest: true,
  //         url: values.url,
  //       });
  //     } else {
  //       message.error('URL必填');
  //     }
  //   });
  // };

  // testURL = () => {
  //   services[this.api]
  //     .testConnection({
  //       third_list_id: this.props.record.third_list_id,
  //       url: this.state.url,
  //       request_content: this.state.requestData,
  //     })
  //     .then((data) => {
  //       if (data.code === 0) {
  //         // message.success(data.msg || '请求成功');
  //         this.setState({
  //           responseJSON: JSON.stringify(data.data),
  //         });
  //       } else {
  //         message.error(data.msg);
  //       }
  //     });
  // };

  updateInColumns(param) {
    const shows = this.state.input_field_lists.filter((item) => item.param_name.match(param ? param : ''));
    this.setState({
      input_field_shows: shows,
    });
  }

  updateOutColumns(param) {
    const shows = this.state.output_field_lists.filter((item) => item.param_name.match(param ? param : ''));
    this.setState({
      output_field_shows: shows,
    });
  }

  updateMapInColumns(param) {
    const mapIns = this.state.input_field_lists.filter((item) => item.param_name.match(param ? param : ''));
    this.setState({
      mapInShows: mapIns,
    });
  }

  // 新建映射、更新映射
  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err && this.state.input_field_lists) {
        const { mapping_relation, app_id, product_id, event_id } = this.state;
        const newArr = Object.values(mapping_relation).filter((it) => it);
        if (!newArr.length) return message.warning('映射关系不能为空');
        const batch_mapping_relation = {
          app_id,
          product_id,
          event_id,
          mapping_relation: newArr,
        };
        const params = {
          batch_mapping_relation: [batch_mapping_relation],
        };
        if (this.actionType === 'add') {
          this.handleSubmitEdit();
        }
        if (this.actionType === 'add' || this.actionType === 'map') {
          params.third_list_config_id = values.third_list_config_id || this.props.record.third_list_config_id;
          services[this.api].add(params).then((data) => {
            if (data.code === 0) {
              message.success(data.msg);
              if (this.props.closeModal) {
                this.props.closeModal();
              }
            } else {
              message.error(data.msg);
            }
          });
        } else {
          params.third_list_id =
            this.actionType === 'child-update' ? this.props.childRecord.third_list_id : this.props.record.third_list_id;
          services[this.api].updateMapping(params).then((data) => {
            if (data.code === 0) {
              message.success(data.msg);
              if (this.props.closeModal) {
                this.props.closeModal();
              }
            } else {
              message.error(data.msg);
            }
          });
        }
      }
    });
  };

  // 更新三方名单
  // Edit = () => {
  //   this.form.validateFields((err, values) => {
  //     if (!err) {
  //       if (values.url) {
  //         services.outerList[this.actionType]({
  //           third_list_id: this.props.record.third_list_id,
  //           url: values.url,
  //         }).then((data) => {
  //           if (data.code === 0) {
  //             message.success(data.msg);
  //             if (this.props.closeModal) {
  //               this.props.closeModal();
  //             }
  //           } else {
  //             message.error(data.msg);
  //           }
  //         });
  //       } else {
  //         message.error('URL必填');
  //       }
  //     }
  //   });
  // };

  handleConfirmBlur = (e) => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  activeFirstRow = () => {
    this.setState({
      activeRow:
        this.state.input_field_lists && this.state.input_field_lists.length > 0
          ? this.state.input_field_lists[0]
          : null,
    });
  };

  nextStep = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          step: 2,
          mapping_relation: {},
        });
        this.activeFirstRow();
      }
    });
  };

  prevStep = () => {
    this.setState({
      step: 1,
    });
  };

  // nameListChange = (e) => {
  //   this.setState({
  //     third_list_config_id: e,
  //   });
  //   services[this.api].getNameListDetail({ third_list_config_id: e }).then((res) => {
  //     if (res.code === 0) {
  //       this.form.setFieldsValue({
  //         remark: res.data.remark,
  //       });
  //       this.setState({
  //         input_field_lists: res.data.input_field_list,
  //         output_field_lists: res.data.output_field_list,
  //       });
  //       this.updateInColumns();
  //       this.updateOutColumns();
  //       this.updateMapInColumns();
  //       this.setState({
  //         keywordAdd: '',
  //         keywordMap: '',
  //       });
  //       this.activeFirstRow();
  //     } else {
  //       message.error(res.msg);
  //     }
  //   });
  // };

  // smartMap = () => {
  //   const { app_id, product_id, event_id, third_list_config_id } = this.state;
  //   if (!app_id) {
  //     return message.warn('请选择渠道');
  //   }
  //   if (!product_id) {
  //     return message.warn('请选择产品');
  //   }
  //   if (!event_id) {
  //     return message.warn('请选择事件');
  //   console.log(222, third_list_config_id);
  //   }
  //   services[this.api]
  //     .smartMap({
  //       third_list_config_id: third_list_config_id || (this.record ? this.record.third_list_config_id : ''),
  //       app_id,
  //       product_id,
  //       event_id,
  //     })
  //     .then((res) => {
  //       if (res.code === 0) {
  //         res.data.forEach((item) => {
  //           this.updateMap(item, true);
  //         });
  //         this.initTableSelected();
  //       } else {
  //         message.error(res.msg);
  //       }
  //     });
  // };

  // onSourceChange = (e) => {
  //   this.getNameList(e);
  //   // 如果选中的行内数据源，则展示出同步按钮
  //   if (e === BANK_DATA_SOURCE) {
  //     this.setState({
  //       asyncBtnVisible: true,
  //     });
  //   }
  // };

  filterField = (e) => {
    this.updateInColumns(e);
    this.updateOutColumns(e);
  };

  filterFieldMap = (e) => {
    this.updateMapInColumns(e);
  };

  activeRowClass = (record) => {
    return record === this.state.activeRow ? 'active-row' : '';
  };

  onRow = (record) => {
    return {
      onClick: () => {
        if (this.state.audit_status === AUDIT._WAIT) {
          return;
        }
        this.setState({ activeRow: record });
        this.initTableSelected(record);
      },
    };
  };

  updateMap = (field, isInit) => {
    const { input_field_lists, activeRow } = this.state;
    const mapping_relation = { ...this.state.mapping_relation };
    if (isInit) {
      let map = field;
      mapping_relation[field.param_id] = map;
      this.setState({
        mapping_relation,
      });
    } else if (activeRow) {
      let map = {};
      if (field && field.length > 0) {
        for (let i = 0; i < input_field_lists.length; i++) {
          if (activeRow.param_id === input_field_lists[i].param_id) {
            map = {
              param_id: input_field_lists[i].param_id,
              param_code: input_field_lists[i].param_code,
              field_id: field[0].field_id,
              field_code: field[0].field_code,
            };
            break;
          }
        }
      } else {
        map = undefined;
      }
      mapping_relation[activeRow.param_id] = map;
      this.setState({
        mapping_relation,
      });
    }
  };

  updateAppAndEvent = (app_id, product_id, event_id, skipRequest) => {
    this.setState({
      app_id,
      product_id,
      event_id,
    });
    if (this.state.event_id !== '' && event_id !== this.state.event_id)
      this.setState({
        mapping_relation: {},
      });
    if ((this.actionType === 'map' || this.actionType === 'child-update') && event_id && !skipRequest) {
      const third_list_id =
        this.actionType === 'child-update' ? this.props.childRecord.third_list_id : this.props.record.third_list_id;
      services[this.api]
        .getMapping({
          third_list_id,
          app_id,
          product_id,
          event_id,
        })
        .then((res) => {
          if (res.code === 0 && res.data && res.data.list) {
            res.data.list.forEach((item) => {
              this.updateMap(item, true);
            });
            this.initTableSelected();
            this.setState({
              audit_status: res.data.audit_status,
            });
          } else {
            message.error(res.msg);
          }
        });
    }
  };

  initTableSelected(record) {
    const { activeRow, mapping_relation } = this.state;
    record = record || activeRow;
    if (record && mapping_relation && mapping_relation[record.param_id] && mapping_relation[record.param_id].field_id) {
      this.refs.fields.updateSelectedRowKeys(mapping_relation[record.param_id].field_id);
    } else {
      this.refs.fields.updateSelectedRowKeys();
    }
  }

  // 更新备注
  handleSubmitEdit = async () => {
    const { remark, third_list_config_id } = this.form.getFieldsValue();
    const res = await services[this.api].remark({ remark, third_list_config_id });
    if (this.actionType === 'update') {
      if (res.code === 0) {
        message.success(res.msg);
        this.props.closeModal && this.props.closeModal();
      } else {
        message.error(res.msg);
      }
    }
  };

  onChangePagination = (page, pageSize) => {
    const { mapInShows } = this.state;
    const index = (page - 1) * pageSize;
    const record = mapInShows[index];
    this.setState({
      activeRow: record,
    });
    this.initTableSelected(record);
  };

  render() {
    const { interfaceGroupOptions, interfaceOptions, inputPageParams, outputPageParams } = this.state;
    const { record = {} } = this.props;
    const { third_list_config_id, group_id, remark } = record;
    const formItems = [
      {
        label: {
          label: '接口分组',
          className: 'tantuer-form-item2',
        },
        name: 'group_id',
        options: {
          initialValue: group_id,
          rules: [{ required: true, message: '请选择接口分组' }],
        },
        component: (
          <Select
            placeholder='请选择'
            disabled={this.actionType !== 'add'}
            onChange={(value) => this.handleGroupChange(value)}
          >
            {interfaceGroupOptions.map((item) => (
              <Option value={item.id} key={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        ),
      },
      {
        label: {
          label: '数据接口',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap',
        },
        name: 'third_list_config_id',
        options: {
          initialValue: third_list_config_id,
          rules: [{ required: true, message: '请选择数据接口' }],
        },
        component: (
          <Select placeholder='请选择' disabled={this.actionType !== 'add'} onChange={this.handleInterfaceChange}>
            {interfaceOptions.map((item) => (
              <Option value={item.third_list_config_id} key={item.third_list_config_id}>
                {item.name}
              </Option>
            ))}
          </Select>
        ),
      },
      {
        label: {
          label: '描述',
          className: 'tantuer-form-item2',
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [{ max: 256, message: '最长256个字符' }],
        },
        component: <Input placeholder='' disabled={this.actionType === 'detail'} />,
      },
    ];
    const columnsIn = [
      {
        title: '序号',
        key: 'param_id',
        render: (_, record, index) => (inputPageParams.page - 1) * inputPageParams.size + index + 1,
      },
      {
        title: '字段名',
        dataIndex: 'param_name',
        key: 'param_name',
      },
      {
        title: '字段code',
        dataIndex: 'param_code',
        key: 'param_code',
      },
      {
        title: '类型',
        dataIndex: 'data_type',
        key: 'data_type',
      },
      {
        title: '必填',
        dataIndex: 'required',
        key: 'required',
        render: (text, record) => {
          return record.required === 1 ? '是' : '否';
        },
      },
      {
        title: '长度',
        dataIndex: 'max_length',
        key: 'max_length',
      },
      {
        title: '描述',
        dataIndex: 'remark',
        key: 'remark',
      },
    ];
    const columnsOut = [
      {
        title: '序号',
        key: 'param_id',
        render: (_, record, index) => (outputPageParams.page - 1) * outputPageParams.size + index + 1,
      },
      {
        title: '字段名',
        dataIndex: 'param_name',
        key: 'param_name',
      },
      {
        title: '字段code',
        dataIndex: 'param_code',
        key: 'param_code',
      },
      {
        title: '类型',
        dataIndex: 'data_type',
        key: 'data_type',
      },
      // {
      //   title: (
      //     <FilterToolColumnTitle
      //       title='来源'
      //       options={[
      //         {
      //           key: 0,
      //           value: '接口输出',
      //         },
      //         {
      //           key: 1,
      //           value: '自定义',
      //         },
      //       ]}
      //       selectedIds={this.state.outerSelectResource}
      //       refreshTableFilter={this.refreshOuterTableFilter}
      //     />
      //   ),
      //   dataIndex: 'resource',
      // },
      {
        title: '来源',
        dataIndex: 'param_type',
        key: 'param_type',
        filters: [{ text: '接口输出', value: 1 }, { text: '自定义', value: 2 }],
        filterMultiple: false,
        onFilter: (value, { param_type }) => param_type === value,
        filterIcon: (
          <IconFont
            type='iconfiltrate-1'
            style={{ fontSize: '18px', position: 'relative', cursor: 'pointer', left: '-7px', top: '-11px' }}
          />
        ),
        render: (text) => ['-', '接口输出', '自定义'][text],
      },
      {
        title: '长度',
        dataIndex: 'max_length',
        key: 'max_length',
      },
      {
        title: '描述',
        dataIndex: 'remark',
        key: 'remark',
      },
    ];
    return (
      <div>
        <div style={{ display: this.state.step === 1 ? 'block' : 'none' }}>
          <div>
            <Row>
              <Col>
                <CustomForm
                  {...this.props}
                  closeModal={this.props.closeModal}
                  createForm={(ref) => (this.form = ref)}
                  formItems={formItems}
                  onHandleSubmit={this.handleSubmit}
                  hideSubmit={true}
                  colNum={2}
                />
              </Col>
            </Row>
            <Row>
              <Col>
                <Search
                  placeholder='请输入字段名'
                  onSearch={this.filterField}
                  allowClear
                  onChange={(e) => {
                    this.setState({
                      keywordAdd: e.target.value,
                    });
                  }}
                  value={this.state.keywordAdd}
                  style={{ position: 'absolute', width: '20%', right: 0, zIndex: 1 }}
                />
                <Tabs defaultActiveKey='1'>
                  <TabPane tab='输入参数' key='1'>
                    <Table
                      columns={columnsIn}
                      dataSource={this.state.input_field_shows}
                      pagination={{
                        showQuickJumper: true,
                        showTotal: (total) => `总共 ${total} 条`,
                        showSizeChanger: true,
                        pageSizeOptions: ['5', '10', '15', '20'],
                        onChange: (page, size) => this.setState({ inputPageParams: { page, size } }),
                      }}
                      rowKey='param_id'
                    />
                  </TabPane>
                  <TabPane tab='输出参数' key='2'>
                    <Table
                      columns={columnsOut}
                      dataSource={this.state.output_field_shows}
                      pagination={{
                        showQuickJumper: true,
                        showTotal: (total) => `总共 ${total} 条`,
                        showSizeChanger: true,
                        pageSizeOptions: ['5', '10', '15', '20'],
                        onChange: (page, size) => this.setState({ outputPageParams: { page, size } }),
                      }}
                      rowKey='param_id'
                    />
                  </TabPane>
                </Tabs>
              </Col>
              <div className='form-btn' style={{ marginTop: '30px' }}>
                {this.actionType === 'add' ? (
                  <>
                    <Button onClick={this.props.closeModal}>取消</Button>
                    <Button type='primary' autoFocus={true} onClick={this.nextStep}>
                      下一步
                    </Button>
                  </>
                ) : (
                  ''
                )}
                {this.actionType === 'update' ? (
                  <>
                    <Button type='primary' autoFocus={true} onClick={this.handleSubmitEdit}>
                      确定
                    </Button>
                    <Button onClick={() => this.props.closeModal(true)}>取消</Button>
                  </>
                ) : (
                  ''
                )}
              </div>
            </Row>
          </div>
          {/* <div>
              <Row gutter={20}>
                <Col span={14}>
                  <Search
                    placeholder='请输入字段名'
                    onSearch={this.filterField}
                    value={this.state.keywordAdd}
                    onChange={(e) => {
                      this.setState({
                        keywordAdd: e.target.value,
                      });
                    }}
                    allowClear
                    style={{ position: 'absolute', width: '30%', right: 0, zIndex: 1 }}
                  />
                  <Tabs defaultActiveKey='1'>
                    <TabPane tab='输入参数' key='1'>
                      <Table
                        columns={this.state.columnsTestIn}
                        dataSource={this.state.input_field_shows}
                        pagination={false}
                        rowKey='param_id'
                      />
                    </TabPane>
                    <TabPane tab='输出参数' key='2'>
                      <Table
                        columns={this.state.columnsTestOut}
                        dataSource={this.state.output_field_shows}
                        pagination={false}
                        rowKey='param_id'
                      />
                    </TabPane>
                  </Tabs>
                </Col>
                <Col span={10}>
                  <p>请求内容</p>
                  <TextArea rows={14} value={this.state.requestJSON} />
                  <p>返回内容</p>
                  <TextArea rows={10} disabled value={this.state.responseJSON} style={{ color: '#888' }} />
                </Col>
              </Row>
              <div className='form-btn'>
                <Button type='primary' onClick={this.testURL}>
                  测试
                </Button>
                <Button
                  className='marl10'
                  onClick={() => {
                    this.setState({
                      showTest: false,
                    });
                  }}
                >
                  取消
                </Button>
              </div>
            </div>
          )} */}
        </div>
        <div className='tantuer' style={{ display: this.state.step === 2 ? 'block' : 'none' }}>
          <Row style={{ marginBottom: '15px' }} gutter={20}>
            <Col span={18}>
              <p>
                在使用接口的输出字段前，请先将数据接口的输入字段进行映射。每次仅可完成在一个事件下映射，保存以最后选择的事件为准。
              </p>
            </Col>
            {/* <Col span={6} style={{ textAlign: 'right' }}>
              <Button type='primary' onClick={this.smartMap} disabled={this.state.audit_status === AUDIT._WAIT}>
                智能映射
              </Button>
              <Question title='智能映射自动将名单、风控事件里名称相同的字段进行映射；如已在其他事件执行了映射操作，事件间相同的字段映射关系可通过智能映射来复制' />
            </Col> */}
          </Row>
          <Row gutter={20}>
            {this.state.audit_status === AUDIT._WAIT && (
              <Col span={24} style={{ marginBottom: '20px' }}>
                <Alert message='当前映射关系处于待审核状态，暂时无法修改！' type='warning' />
              </Col>
            )}
            <Col span={10}>
              <div className='map-origin'>
                <span>接口输入字段</span>
                <Search placeholder='请输入字段名' onSearch={this.filterFieldMap} allowClear />
                <Table
                  rowClassName={this.activeRowClass}
                  columns={this.state.columnsMap}
                  dataSource={this.state.mapInShows}
                  pagination={{
                    onChange: this.onChangePagination.bind(this),
                    showQuickJumper: true,
                    size: 'small',
                  }}
                  onRow={this.onRow}
                  rowKey='param_id'
                  className='fixed'
                />
              </div>
            </Col>
            <Col span={14}>
              <div className='map-origin'>
                <span>风控事件字段</span>
                <Fields
                  {...this.props}
                  ref='fields'
                  updateMap={this.updateMap}
                  updateAppAndEvent={this.updateAppAndEvent}
                  activeRow={this.state.activeRow}
                  mapping_relation={this.state.mapping_relation}
                  disabled={this.state.audit_status === AUDIT._WAIT || this.actionType === 'child-update'}
                />
              </div>
            </Col>
            <Col span={24} className='form-btn' style={{ marginTop: '30px' }}>
              {this.actionType === 'add' ? (
                <Button type='primary' onClick={this.prevStep}>
                  上一步
                </Button>
              ) : (
                ''
              )}
              <Button
                type='primary'
                onClick={this.handleSubmit}
                className='marl10'
                disabled={this.state.audit_status === AUDIT._WAIT}
              >
                确定
              </Button>
              <Button
                onClick={() => this.props.closeModal(true)}
                className='marl10'
                disabled={this.state.audit_status === AUDIT._WAIT}
              >
                取消
              </Button>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}

export default OuterListAdd;
